<template>
  <view class="phxx-item-detail">
    <view class="content-box">
      <view class="top block-back">
        <view class="cph-box">
          <view class="cph">
            {{ itemList.vehicleNo || '-' }}
          </view>
        </view>
        <view class="status" :class="{            
          'orange-type': itemList.waybillStatus === 0,
          'blue-type': itemList.waybillStatus === 1,
          'purple-type': itemList.waybillStatus === 2,
          'cyan-type': itemList.waybillStatus === 3,
          'red-orange-type': itemList.waybillStatus === 4,
          'red-purple-type': itemList.waybillStatus === 5,
          'green-type': itemList.waybillStatus === 6,
          'red-type': itemList.waybillStatus === 7,
          'gray-type': itemList.waybillStatus===8
        }">
          {{ statusName[itemList.waybillStatus] }}
        </view>
      </view>

      <view class="bottom block-back">
        <view class="title-box">基本信息</view>
        <view class="line"></view>
        <view class="items">
          <text class="til col99">客户名称:</text>
          <text class="val col33">{{ itemList.customerName || '-'}}</text>
        </view>
        <view class="items">
          <text class="til col99">承运单位:</text>
          <text class="val col33">{{ itemList.cusTransport || '-'}}</text>
        </view>
        <view class="items">
          <text class="til col99">煤种:</text>
          <text class="val col33">{{ itemList.coalSubtypeName || '-'}}</text>
        </view>
        <view class="items">
          <text class="til col99">司机姓名:</text>
          <text class="val col33">{{ itemList.driverName || '-'}}</text>
        </view>
        <view class="items">
          <text class="til col99">电话:</text>
          <text class="val col33">{{ itemList.driverMobile || '-'}}</text>
        </view>
      </view>


      <view class="bottom block-back">
        <view class="bottom title-box">运输情况</view>
        <view class="line mgrb20"></view>
        <view class="bottom title-box1">
          <view class="til-icon-name"></view>装货信息
        </view>
        <view class="bottom block-items">
          <view class="items gray-back">
            <view class="til col99 font13">毛重(吨)</view>
            <view class="val col00 font-20 fontwtb">{{ itemList.grossWeight || '-'}}</view>
          </view>
          <view class="items gray-back">
            <view class="til col99 font13">皮重(吨)</view>
            <view class="val col00 font-20 fontwtb">{{ itemList.netWeight || '-'}}</view>
          </view>
          <view class="items gray-back">
            <view class="til col99 font13">净重(吨)</view>
            <view class="val col00 font-20 fontwtb">{{ itemList.totalWeight || '-'}}</view>
          </view>
        </view>
        <view class="items">
          <text class="til col99">接单时间:</text>
          <text class="val col33">{{ itemList.createTime ? getDateFormatString(itemList.createTime) : '-'}}</text>
        </view>
        <view class="items">
          <text class="til col99">轻磅时间:</text>
          <text class="val col33">{{ itemList.netTime ? getDateFormatString(itemList.netTime) : '-'}}</text>
        </view>
        <view class="items">
          <text class="til col99">重磅时间:</text>
          <text class="val col33">{{ itemList.grossTime ? getDateFormatString(itemList.grossTime) : '-'}}</text>
        </view>
      </view>

      <view class="bottom block-back">
        <view class="bottom title-box">费用</view>
        <view class="line mgrb20"></view>
        <view class="value-row">
          <view>
            <view>单价（元/吨）</view>
            <text>{{itemList.endPrice != null || itemList.endPrice != undefined ? itemList.endPrice : '-'}}</text>
          </view>
          <view>
            <view>总价（元）</view>
            <text>{{itemList.priceTotal != null || itemList.priceTotal != undefined ? itemList.priceTotal :  '-'}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getDictDatas } from '@/api/me.js';
  import { getSaleWaybillbyId } from '@/api/tranplan.js';
  import { dictTansParams, getDateFormat } from '@/utils/common.js';
  import config from '@/config'
  export default {
    name: 'row-number',
    data() {
      return {
        wayBillStatusData: [],
        imagesPath: config.baseImgUrl + '/img.png',
        statusName: {
          0: '待审核',
          1: '待入场',
          2: '待录皮',
          3: '待装煤',
          4: '待称毛',
          5: '待出厂',
          6: '已完成',
          7: '已作废',
          8: '已终止'
        },
        itemList: {}
      }
    },
    computed: {
      getDateFormatString() {
        return (value) => {
          return getDateFormat(value)
        }
      }
    },
    onLoad(options) {
      this.fromMap = false
      if (!!options) {
        if (!!options.id) this.getDetail(options.id)
      }
    },
    onShow() {
      //获取字典
      this.getLicenseTypeDict()
    },
    methods: {
      clickImg(url) {
        uni.previewImage({
          urls: [url]
        });
      },
      async getLicenseTypeDict() {
        let datas = await getDictDatas()
        this.wayBillStatusData = dictTansParams(datas.data, 'purchase_waybill_status')
        for (var i = 0; i < this.wayBillStatusData.length; i++) {
          if (this.itemList.status == this.wayBillStatusData[i].value) {
            this.itemList.statusName = this.wayBillStatusData[i].text
          }
        }
      },
      async getDetail(id) {
        const res = await getSaleWaybillbyId({ id })
        if (res.code === 0) {
          this.itemList = res.data
        }
      },
      examine() {

      },
      handleClick(item, type) {
        console.log(item);
        this.$emit('manualCalling', item, type);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .cph-box {
    min-width: 160rpx;
    background: #FFE24A;
    overflow: hidden;
    height: 88rpx;
    border-radius: 5rpx;

    .cph {
      font-weight: bold;
      font-size: 32rpx;
      min-width: 160rpx;
      border: 1px solid #333;
      padding: 0 14rpx;
      margin: 4rpx;
      border-radius: 5rpx;
      height: 80rpx;
      line-height: 80rpx;
    }
  }

  .value-row {
    display: flex;

    >view+view {
      margin-left: 10px;
    }

    >view {
      flex: 1;
      height: 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(64, 158, 254, 0.10);

      >view {
        font-size: 13px;
        color: #999999;
        border-radius: 4px;
      }

      >text {
        margin-top: 4px;
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
</style>